/**
 * 首页主路由
 */

import styled from "@emotion/styled";
import { CardHader } from "../../../csscomponents/base";
import { useEffect } from "react";
import { Chart } from "@antv/g2";
import { IUserRank, useGetAddBeefByMonth, useGetStatisticByUserRank, useGetStatisticByUserRankMonth, useGetStatisticByUserRankWeek, useGetUnitBeefRank } from "../../../service/statistic-service";

const IndexDashboardPage = () => {


  //渲染走访个人排名前十
  const { data: dataSourceUserRank } = useGetStatisticByUserRank();
  useEffect(() => {
    if (dataSourceUserRank) {
      renderUserRank(dataSourceUserRank);
    }
  }, [dataSourceUserRank])
  const renderUserRank = (data: IUserRank[]) => {
    const chart = new Chart({
      container: 'rank-user',
      autoFit: true,
    });
    chart
      .interval()
      .coordinate({ transform: [{ type: 'transpose' }] })
      .data(data)
      .encode('color', 'name')
      .encode('x', 'name')
      .encode('y', 'value');
    chart.render();
  }
  //渲染走访个人排名前十(本周）

  const { data: dataSourceUserRankWeek } = useGetStatisticByUserRankWeek();
  useEffect(() => {
    if (dataSourceUserRankWeek) {
      renderUserRankWeek(dataSourceUserRankWeek)
    }
  }, [dataSourceUserRankWeek])
  const renderUserRankWeek = (data: IUserRank[]) => {
    const chart = new Chart({
      container: 'rank-user-week',
      autoFit: true,
    });
    chart
      .interval()
      .coordinate({ transform: [{ type: 'transpose' }] })
      .data(data)
      .encode('color', 'name')
      .encode('x', 'name')
      .encode('y', 'value');
    chart.render();
  }
  //渲染走访个人排名前十(本月）

  const { data: dataSourceUserRankMonth } = useGetStatisticByUserRankMonth();
  useEffect(() => {
    if (dataSourceUserRankMonth) {
      renderUserRankMonth(dataSourceUserRankMonth)
    }
  }, [dataSourceUserRankMonth])
  const renderUserRankMonth = (data: IUserRank[]) => {
    const chart = new Chart({
      container: 'rank-user-month',
      autoFit: true,
    });
    chart
      .interval()
      .coordinate({ transform: [{ type: 'transpose' }] })
      .data(data)
      .encode('color', 'name')
      .encode('x', 'name')
      .encode('y', 'value');
    chart.render();
  }
  //渲染每日新增数据
  const { data: dataSourceAddBeefByMonth } = useGetAddBeefByMonth();
  useEffect(() => {
    if (dataSourceAddBeefByMonth) {
      renderUserAddBeefByMonth(dataSourceAddBeefByMonth)
    }
  }, [dataSourceAddBeefByMonth])
  const renderUserAddBeefByMonth = (data: IUserRank[]) => {
    const chart = new Chart({ container: 'rank-user-add-month', autoFit: true });
    chart
      .data(data)
      .encode('x', 'name')
      .encode('y', 'value')
      .scale('x', {
        range: [0, 1],
      })
      .scale('y', {
        domainMin: 0,
        nice: true,
      });
    chart.line().label({
      text: 'value',
      style: {
        dx: -100,
        dy: -120,
      },
    });
    chart.point().style('fill', 'white').tooltip(false);
    chart.render();
  }

  //渲染单位排名
  const { data: dataSourceUnitBeefRank } = useGetUnitBeefRank();
  useEffect(() => {
    if (dataSourceUnitBeefRank) {
      renderUserUnitByRank(dataSourceUnitBeefRank)
    }
  }, [dataSourceUnitBeefRank])
  const renderUserUnitByRank = (data: IUserRank[]) => {
    const chart = new Chart({ container: 'rank-unit', autoFit: true });
    chart
      .interval()
      .data(data)
      .encode('x', 'name')
      .encode('y', 'value')
      .encode('color', 'name')
    chart.render();
  }


  return (
    <IndexDashboardPageView>
      <div className="header">
        <div className="header-left">
          <CardHader >走访个人排名前十</CardHader>
          <div id="rank-user" style={{ height: '12rem' }}></div>
        </div>
        <div className="header-center">
          <CardHader > 走访个人排名前十(本周)</CardHader>
          <div id="rank-user-week" style={{ height: '12rem' }}></div>
        </div>
        <div className="header-right">
          <CardHader >走访个人排名前十(本月)</CardHader>
          <div id="rank-user-month" style={{ height: '12rem' }}></div>
        </div>
      </div>
      <div className="unit-center">
        <CardHader >近30日新增数据</CardHader>
        <div id="rank-user-add-month" style={{ height: '22rem' }}></div>
      </div>
      <div className="unit-footer">
        <CardHader >单位排名</CardHader>
        <div id="rank-unit" style={{ height: 'calc(100% - 5rem)' }}></div>
      </div>
    </IndexDashboardPageView>
  );
};

export default IndexDashboardPage;


const IndexDashboardPageView = styled.div`
  display: flex;
  flex-direction: column;
  height: calc(100vh - 9rem);
  .header  {
    height: 15rem;
    margin-bottom: 12px;
    display: flex;
    gap: 1rem;
    > div{
      flex: 1;
      background-color: #fff;
      height: 15rem;
    }
  }
  .unit-center {
    height: 25rem;
    background-color: #fff;
    margin-bottom: 1rem;
  }

  .unit-footer{
    flex: 1;
    background-color: #fff;
  }

`